<template>
<el-container>
  <el-header style="background-color: white;color:black">
      <h1 align="center">试卷生成</h1>
  </el-header>
  <el-main>
<!-- 试题表单 -->
<el-form  :inline="true" :model="formData" class="demo-form-inline">
  <el-form-item label="试卷名称">
    <el-input v-model="formData.paperName" placeholder="试卷名称"></el-input>
  </el-form-item>

  <el-form-item label="试卷总分">
   <el-radio-group v-model="formData.paperScore">
     <el-radio label="100"></el-radio>
     <el-radio label="120"></el-radio>
   </el-radio-group>
  </el-form-item>

  <el-form-item label="试卷时长">
   <el-radio-group v-model="formData.paperTime">
     <el-radio label="60"></el-radio>
     <el-radio label="120"></el-radio>
   </el-radio-group>
  </el-form-item>

</el-form>
        <!-- 表格组件-->
        <!-- :data 当前页集合-->
        <el-table :data="list" :row-key="rw" style="100%" @selection-change="selectVal">
          <!-- 列组件-->
          <!-- prop 对应当前页集合的对象属性 -->
           <el-table-column :reserve-selection="true" type="selection" width="100"></el-table-column>
           <el-table-column prop="quId" label="编号" width="100"></el-table-column>
           <el-table-column prop="quContent" label="题目" width="400"></el-table-column>
           <el-table-column prop="quType" label="题型" width="100"></el-table-column>
           <el-table-column prop="quScore" label="分数" width="100"></el-table-column>
           <el-table-column prop="quAnswer" label="答案" width="100"></el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
        @size-change="select"
        @current-change="selectPage"
        :current-page="queryForm.page"
        :page-sizes="[10,15,20]"
        :page-size="queryForm.row"
        :total="total"
        layout="sizes,prev,pager,next,jumper,total"
        >
        </el-pagination>
         <el-button type="success" size="mini" @click="paperAdd">生成试卷</el-button>

        <!-- 预览试卷弹窗-->
        <el-dialog title="预览试卷" :visible.sync="isShow" width="50%">

            <div align="center">
                  <h1>
                    试卷名称:{{paper.paperName}}
                    试卷总分:{{paper.paperScore}}
                    试卷时长:{{paper.paperTime}}
                   </h1>
            </div>

          <h1>一:单选题</h1>
          <template v-for="(x,index) in signList">
            <el-card class="box-card">
                <div class="clearfix" slot="header">
                    <span>{{index+1}}:{{x.quContent}}</span>
                </div>
                <div class="text item">
                    A:<input type="radio" :name="'s'+index" value="A">{{x.quAoption}}
                </div>
                <div class="text item">
                    B:<input type="radio" :name="'s'+index" value="B">{{x.quBoption}}
                </div>
                <div class="text item">
                    C:<input type="radio" :name="'s'+index" value="C">{{x.quCoption}}
                </div>
                <div class="text item">
                    D:<input type="radio" :name="'s'+index"  value="D">{{x.quDoption}}
                </div>
            </el-card>
            <br>
        </template>

        <h1>二:多选题</h1>
          <template v-for="(x,index) in moreList">
            <el-card class="box-card">
                <div class="clearfix" slot="header">
                    <span>{{index+1}}:{{x.quContent}}</span>
                </div>
                <div class="text item">
                    A:<input type="checkbox" :name="'m'+index" value="A">{{x.quAoption}}
                </div>
                <div class="text item">
                    B:<input type="checkbox" :name="'m'+index" value="B">{{x.quBoption}}
                </div>
                <div class="text item">
                    C:<input type="checkbox" :name="'m'+index" value="C">{{x.quCoption}}
                </div>
                <div class="text item">
                    D:<input type="checkbox" :name="'m'+index" value="D">{{x.quDoption}}
                </div>
            </el-card>
            <br>
        </template>

        <h1>三:判断题</h1>
          <template v-for="(x,index) in judgeList">
            <el-card class="box-card">
                <div class="clearfix" slot="header">
                    <span>{{index+1}}:{{x.quContent}}</span>
                </div>
                <div class="text item">
                    √:<input type="radio" :name="'j'+index" value="√">
                </div>
                <div class="text item">
                    ×:<input type="radio" :name="'j'+index" value="×">
                </div>

            </el-card>
            <br>
        </template>

        </el-dialog>

  </el-main>
</el-container>

</template>

<script>
    export default {
          name:"paperAdd",
          data(){
              return{
                  list:[],//当前页集合
                  totalPage:0,//总页数
                  total:0,//总条数
                  queryForm:{//查询表单
                      page:1,
                      row:5,
                  },
                  isShow:false,
                  formData:{//增的表单
                      paperName:"",
                      paperScore:"",
                      paperTime:"",
                      quIds:"",
                  },
                  selectIds:[],
                  paper:{},//试卷对象
                  signList:[],
                  moreList:[],
                  judgeList:[]


              }
          },
          methods:{
              loadData(){//加载数据
                var self = this;
                var http =this.$http.get("/question/list",{params:this.queryForm});
                http.then(function(rs){
                    if(rs.data.success){
                          self.list = rs.data.data.list;
                          self.total = rs.data.data.total;
                          self.totalPage = rs.data.data.totalPage;
                    }else{
                      self.list=[];
                      self.total=0;
                    }
                })
              },
              select(row){//分页下拉框选中触发的事件,row是当前选中条数
                  this.queryForm.row = row;
                  //刷新
                  this.loadData();
              },
              selectPage(page){//选中页码触发的事件,page就是选中的页码
                this.queryForm.page = page;
                //刷新
                this.loadData();
              },
              paperAdd(){//试卷生成
                  //清空
                  this.formData.quIds="";
                  //获取选中的Id
                  for(var i=0;i<this.selectIds.length;i++){
                      this.formData.quIds+=this.selectIds[i].quId+",";
                  }
                  console.log(this.formData);
                  var self = this;
                  var http =this.$http.get("/paper/add",{params:this.formData});
                  http.then(function(rs){
                      self.$message(rs.data.info);
                      if(rs.data.success){
                            //显示弹窗
                           self.isShow=true;
                           //预览试卷
                           self.showPaper(self.formData.paperName);
                      }
                  })

              },
              selectVal(val){//表格的复选框选中触发的事件

                this.selectIds = val;
              },
              rw(row){
                //设置需要保留的数据
                return row.quId;
              },
              showPaper(name){//预览试卷
                  //清空
                  this.signList=[];
                  this.moreList=[];
                  this.judgeList=[];

                  var self = this;
                  var http =this.$http.get("/paper/showPaper",{params:{"name":name}});
                  http.then(function(rs){
                      if(rs.data.success){
                           self.paper = rs.data.data;
                           for(var i=0;i<self.paper.list.length;i++){
                                if(self.paper.list[i].quType=="单选题"){
                                    self.signList.push(self.paper.list[i]);
                                }else if(self.paper.list[i].quType=="多选题"){
                                    self.moreList.push(self.paper.list[i]);
                                }else{
                                   self.judgeList.push(self.paper.list[i]);
                                }
                           }


                      }
                  })
              }

          },
          mounted(){
            this.loadData();

          }
    }
</script>

<style>
</style>
